<template>
    <div class="counter-component">
        <div class="counter-btn" @click="minus">-</div>
        <div class="counter-show"><input type="text" v-model="number" @keyup="fixNumber" /></div>
        <div class="counter-btn" @click="add">+</div>
    </div>
</template>

<script>
export default {
    props:{
        max:{
            type:Number,
            default:20
        },
        min:{
           type:Number,
           default:1 
        }
    },
    data(){
        return{
            number:this.min
        }
    },
    watch: {
      //通过watch监听文本域输入，add添加，mius减少，通知父组件的值
      number(){
          this.$emit('on-change',this.number);
      }
    },
    methods:{
        fixNumber(){
            let fix ;
            if(typeof this.number === 'String'){ //判断输入的值是否整数
                fix = Number(this.number.repalce(/\D/g,''));
            }else{
                fix = this.number
            }
            //如果输入的值过大 or 过小
            if(fix > this.max || fix < this.min){
                fix = this.min
            }
              this.number = fix
        },
        minus(){
            if(this.number<= this.min){
                return
            }
             this.number --;
        },
        add(){
            if(this.number >= this.max){
                return
            }
            this.number ++;
        }
    }
}
</script>

<style scoped>
.counter-component{position:relative;display:inline-block;overflow:hidden;vertical-align:middle}
.counter-show{float:left}
.counter-show input{border:none;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;height:23px;line-height:23px;width:30px;outline:none;text-indent:4px}
.counter-btn{border:1px solid #e3e3e3;float:left;height:25px;line-height:25px;width:25px;text-align:center;cursor:pointer}
.counter-btn:hover{border-color:#4fc08d;background:#4fc08d;color:#fff}
</style>

